<template>
  <div>
    <nav-bar>
      <template v-slot:default>商品详情:{{ id }}</template>
    </nav-bar>

    <van-image
      style="margin-top: 50px"
      width="100%"
      lazy-load
      :src="detail.cover_url"
    />

    <van-card
      :num="detail.stock"
      :price="detail.price + '.00'"
      :desc="detail.description"
      :title="detail.title"
    >
      <template #tags>
        <van-tag plain type="danger">新书</van-tag>
        <van-tag plain type="danger">推荐</van-tag>
      </template>
      <template #footer>
        <van-button type="warning" @click="handleAddCart">加入购物车</van-button>
        <van-button type="danger" @click="goToCart">立即购买</van-button>
      </template>
    </van-card>

    <van-tabs v-model="active">
      <van-tab title="概述">
        <div class="content" v-html="detail.details"></div>
      </van-tab>
      <van-tab title="热评">
        <div v-for="(item,index) in detail.comments"></div>
      </van-tab>
      <van-tab title="相关图书">
        <goods-list :goods="like_goods"></goods-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import goodsList from 'components/content/goods/GoodsList.vue'
import navBar from "components/common/navbar/NavBar";
import { useRoute,useRouter } from "vue-router";
import {useStore} from 'vuex'
import { onMounted, reactive, ref, toRefs } from "vue";
import { getDetail } from "network/detail.js";
import { addCart } from "network/cart.js";
import { Toast } from 'vant';
export default {
  components: {
    navBar,
    goodsList
  },
  setup() {
    const route = useRoute();
    const router=useRouter()
    const store=useStore()
    let active=ref(1)
    let id = ref(0);
    let book = reactive({
      detail: {},
      like_goods: [],
      comments:[]
    });

    onMounted(() => {
      id.value = route.query.id;
      getDetail(id.value).then((res) => {
        console.log(res);
        book.detail = res.goods;
        book.like_goods = res.like_goods;
        book.comments=res.goods.comments
      });
    });

    // 添加
    const handleAddCart=()=>{
          addCart({goods_id:book.detail.id,num:1}).then(res=>{
             console.log(res.status);
             if(res.status=='201'||res.status=='204'){
               Toast.success('添加成功')
              //  设置store中的cartCount
               store.dispatch('updateCart')
             }
          })
    }
    // 购买
    const goToCart=()=>{
          addCart({goods_id:book.detail.id,num:1}).then(res=>{
             console.log(res.status);
             if(res.status=='201'||res.status=='204'){
               Toast.success('已添加至购物车')
              //  设置store中的cartCount
               store.dispatch('updateCart')
               router.push({path:'/shopcart'})
             }
          })
    }
    return {
      id,
      ...toRefs(book),
      active,
      handleAddCart,
      goToCart
    };
  },
};
</script>
<style lang="less" scoped>
/deep/.content{
  padding: 10px;
  img{
    width: 100%;
     height: auto;
  }
}
</style>